<template>
	<view>
		<logo></logo>
		<view class="login">
			<view class="phone">
				<image src="../../static/img/loginPhone.svg"></image>
				<text>手机号码</text>
				<view class="uni-common-mt">
					<view class="uni-form-item uni-column">
						<input class="uni-input" type="number" v-model="phone" maxlength="11" @blur="phoneError" />
					</view>
				</view>
			</view>
			<view class="psw">
				<image src="../../static/img/loginLock.svg"></image>
				<text>密码</text>
				<view class="uni-common-mt">
					<view class="uni-form-item uni-column">
						<input class="uni-input" maxlength="16" v-model="password" password @blur="passwordError" />
						<text @click="forgetPwd">忘记密码</text>
						<text>|</text>
						<text @click="changePwd">修改密码</text><br>
					</view>
				</view>
			</view>
			<button class="loginTo" @click="login">Sign in</button>
			<button class="loginTo" @click="register">Sign up</button>
		</view>
	</view>
</template>

<script>
	import logo from "../../components/logo/logo.vue"
	export default {
		data() {
			return {
				phone: '',
				password: '',
				checkOk: {
					userPhoneNo: false,
					userPwd: false
				}
			}
		},
		components: {
			logo
		},
		methods: {
			// 手机号码校验
			phoneError() {
				if (this.phone.length == 0 || this.phone == "") {
					uni.showModal({
						title: '手机号码错误',
						content: "请填写您的手机号码！",
						showCancel: false,
						confirmText: '确定'
					});

					// this.phoneMsg = "请填写您的手机号码！"
				} else if (!/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(this.phone)) {
					uni.showModal({
						title: '手机号码错误',
						content: "请正确填写您的手机号码！",
						showCancel: false,
						confirmText: '确定'
					});
					// this.phoneMsg = "请正确填写您的手机号码！"
					this.phone = "";
				} else {
					this.checkOk.userPhoneNo = true
				}

			},
			// 密码校验
			passwordError() {
				if (this.password.length == 0 || this.password == "") {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: "请输入您的密码！"
					// });
					uni.showModal({
						title: '密码校验失败',
						content: "请重新输入您的密码！",
						showCancel: false,
						confirmText: '确定'
					});

				} else if (!/^(?=.*[0-9])(?=.*[a-zA-Z])[0-9A-Za-z~!@#$%^&*._?]{8,16}$/.test(this.password)) {
					uni.showModal({
						title: '密码校验失败',
						content: "密码必须包括数字、字母两种字符，特殊字符可有可无，长度在8-16位之间!",
						showCancel: false,
						confirmText: '确定'
					});
					// uni.showToast({
					// 	icon: 'none',
					// 	title:  "密码必须包括数字、字母两种字符，特殊字符可有可无，长度在8-16位之间！",
					// });
					this.password = ""
				} else {
					this.checkOk.userPwd = true
				}
			},
			// 跳转忘记密码
			forgetPwd() {
				uni.navigateTo({
					url: "/pages/forgetPassword/forgetPassword"
				})
			},
			// 跳转修改密码
			changePwd() {
				uni.navigateTo({
					url: "/pages/changePassword/changePassword"
				})
			},
			// 登录
			async login() {
				// uni.switchTab({
				// 	url:"/pages/index/index"
				// })
				let obj = {}
				obj.userPhoneNo = this.phone
				obj.password = this.password
				// obj = JSON.stringify(obj)
				if (this.checkOk.userPhoneNo == true && this.checkOk.userPwd == true) {
					const res = await this.$myRequest({
						url: "/user/login",
						method: "POST",
						data: obj,
						header: {
							'content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
						},
					})
					console.log(res)
					if (res.data.code == 200) {
						uni.setStorageSync('userId', JSON.stringify(res.data.data.userInfo));
						uni.switchTab({
							url: "/pages/index/index"
						})
					} else {
						uni.showModal({
							title: '调取接口失败',
							content: res.data.msg,
							showCancel: false,
							confirmText: '确定'
						});
					}
				} else {
					uni.showModal({
						title: '登录失败',
						content: "输入不规范请重新输入",
						showCancel: false,
						confirmText: '确定'
					});
					this.phone = ""
					this.password = ""
				}
			},
			// 注册
			register() {
				uni.navigateTo({
					url: "/pages/register/register"
				})
			},

		}

	}
</script>

<style lang="scss">
	.login {
		margin-top: 72rpx;
		position: relative;

		image {
			width: 112rpx;
			height: 112rpx;
			margin-left: 70rpx;
		}

		text {
			position: absolute;
			font-size: 36rpx;
			padding-top: 20rpx;
			color: #000;
		}

		.uni-input {
			margin-left: 188rpx;
			width: 476rpx;
			border-bottom: 2rpx solid #000;

		}

		.phone {
			position: relative;

			.uni-input {
				position: absolute;
				top: 60rpx;
			}
		}

		.uni-form-item {
			text {
				color: #e43d33;
				margin-left: 200rpx;
			}
		}

		.psw {
			margin-top: 160rpx;
			position: relative;

			text {
				margin-left: 12rpx;
			}

			.uni-input {
				position: absolute;
				top: 60rpx;
			}

			.uni-form-item {
				text {
					position: relative;
					// top: -72rpx;
					left: 400rpx;
					font-size: 32rpx;
					color: #000;
				}

				text:hover {
					text-decoration: underline;
				}

				.pwdErr {
					position: relative;
					left: 0rpx;
					margin-left: 200rpx;
					color: #e43d33;
					font-size: 36rpx;
					// width: 100%;
					word-wrap: break-word
				}

				.pwdErr:hover {
					text-decoration: none;
				}
			}
		}

		.loginTo {
			margin-top: 102rpx;
			margin-left: 98rpx;
			width: 488rpx;
			height: 114rpx;
			color: #FFF;
			line-height: 116rpx;
			border-radius: 44rpx;
			background-color: rgba(117, 23, 238, 0.42);
			text-align: center;
		}

		.loginTo:nth-last-child(1) {
			margin-top: 96rpx;
		}
	}
</style>
